---
title: 커스텀 테마
description: 커스텀 테마 만들기
---

# 커스텀 테마

## 커스텀 테마 만들기

> 참고: 이 API는 불안정하며 가까운 미래에 변경될 가능성이 있습니다.
> 현재는 [구성된 테마들](/docs/theming)을 사용하는 것을 권장합니다.

기본 제공 테마는 어느 정도의 사용자 정의를 제공하지만, `Theme` 타입은 하위 수준에서 테마 변수를 정의하여 자신만의 커스텀 테마를 만들 수 있도록 돕습니다.

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### 기본 제공 테마 확장하기

기본 테마를 전체적으로 재정의하지 않고도 확장할 수 있습니다. 이는 특정 테마 토큰만 재정의하고 싶을 때 유용합니다.

이를 위해 `lodash.merge`(또는 이와 유사한 패키지)를 설치하세요:

```bash
npm install lodash.merge
```

확장하려는 테마(예: `darkTheme`) 및 TypeScript `Theme` 타입과 함께 가져오세요:

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

그런 다음, 변경하고자 하는 테마 토큰과 함께 기본 제공 테마를 병합하세요. 이 예제에서는 `accentColor` 토큰을 브랜드의 강조 색상과 일치시키기 위해 오버라이드합니다.

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

마지막으로, 커스텀 테마를 `RainbowKitProvider`의 `theme` prop에 전달할 수 있습니다.

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### 커스텀 테마 선택기 만들기

앱이 서버/정적으로 렌더링되고 사용자가 테마를 수동으로 전환할 수 있는 경우, RainbowKit의 테마 시스템은 다음 함수를 통해 커스텀 CSS 선택기에 연결할 수 있습니다. 이 함수는 어떤 CSS-in-JS 시스템에서도 사용할 수 있습니다:

- `cssStringFromTheme`
- `cssObjectFromTheme`

이 함수들은 모든 필요한 테마 변수를 설정하는 CSS를 반환합니다. 문자열과 객체가 모두 지원되므로, 어떤 CSS-in-JS 시스템과도 통합할 수 있습니다.

기본 예제로, 각 테마에 대한 커스텀 선택기를 사용하여 `style` 요소를 렌더링할 수 있습니다. 테마의 CSS 렌더링을 제어하고 있으므로, `theme` prop에 `null`을 전달하여 RainbowKitProvider가 스타일을 렌더링하지 않도록 합니다. 또한 cssStringFromTheme 함수의 확장 옵션을 사용하여 기본 테마와 동일한 테마 변수를 생략합니다.

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
